<template>
  <div class="news-section">
    <div class="container">
      <div class="news-layout">
        <!-- 左侧内容 -->
        <div class="left-column">
          <!-- 新闻各有态度 -->
          <div class="attitude-section">
            <h3 class="section-title">新闻各有态度</h3>
            
            <!-- 数读 -->
            <div class="subsection">
              <h4 class="subsection-title">数读</h4>
              <div class="news-item">
                <h5 class="news-title">中国5A景区,越来越水了</h5>
                <ul class="news-points">
                  <li>中国人遵守了20年的文明行为,居</li>
                  <li>中年人,扎堆去酒店开房</li>
                </ul>
              </div>
            </div>
            
            <!-- 轻松一刻 -->
            <div class="subsection">
              <h4 class="subsection-title">轻松一刻</h4>
              <div class="news-item">
                <h5 class="news-title">据说这是学生们回学校的全程表情</h5>
                <ul class="news-points">
                  <li>现在幼儿园伙食多好,看看就知道</li>
                  <li>有钱人终成眷属,没钱人亲眼目睹</li>
                </ul>
              </div>
            </div>
            
            <!-- 槽值 -->
            <div class="subsection">
              <h4 class="subsection-title">槽值</h4>
              <div class="news-item">
                <h5 class="news-title">被霸凌的丁真,撕了内娱的剧本</h5>
                <ul class="news-points">
                  <li>抱歉,贵圈谁演他都是灾难级</li>
                  <li>小沈阳女儿,成投胎第一志原了</li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- 网易公开课 -->
          <div class="open-course">
            <h3 class="section-title">网易公开课</h3>
            <div class="course-content">
              <p>专业竞彩一触即发 ·让分享知识成为习惯</p>
              <p>会说话的人生能开挂·不止是看客</p>
            </div>
            <div class="carousel-indicators">
              <span class="indicator active"></span>
              <span class="indicator"></span>
              <span class="indicator"></span>
              <span class="indicator"></span>
            </div>
          </div>
        </div>
        
        <!-- 中间主新闻 -->
        <div class="center-column">
          <div class="news-header">
            <div class="news-logo">
              <span class="logo-text">网易新闻</span>
            </div>
            <nav class="news-nav">
              <a href="#" class="active">首页</a>
              <a href="#">国内</a>
              <a href="#">国际</a>
              <a href="#">数读</a>
              <a href="#">军事</a>
              <a href="#">航空</a>
              <a href="#">传媒科技研究院</a>
              <a href="#">政务</a>
              <a href="#">公益</a>
              <a href="#">媒体</a>
              <a href="#">王三三</a>
            </nav>
          </div>
          
          <div class="main-news">
            <div class="featured-news">
              <h2 class="main-headline">直播:纪念中国人民抗日战争暨世界反法西斯战争胜利80周年大会</h2>
              
              <div class="related-news">
                <div class="news-item">
                  <h4>习近平会见塔吉克斯坦总统 '中华民族' 这四个字,我们重新读懂! 把伟大抗战精神一代代传下去</h4>
                </div>
                <div class="news-item">
                  <h4>习近平会见伊朗总统 巩固政治互信 我们在纪念什么</h4>
                </div>
                <div class="news-item">
                  <h4>新华述评为人类和平发展铸就新的历史丰碑</h4>
                </div>
                <div class="news-item">
                  <h4>骄傲战鹰划过天际这份九三阅兵空中梯队观看指南请收</h4>
                </div>
                <div class="news-item">
                  <h4>抗战胜利80周年纪念活动新闻中心举办第三场记者见面会</h4>
                </div>
                <div class="news-item">
                  <h4>【理响中国·经视图】把握宜居城市建设着力点</h4>
                </div>
                <div class="news-item">
                  <h4>塞尔维亚前副总理:中国在二战中的牺牲应被历史铭记</h4>
                </div>
                <div class="news-item">
                  <h4>面对全球变革 中国行动引领上合大家庭携手前行</h4>
                </div>
              </div>
            </div>
            
            <div class="news-video-banner">
              <div class="video-banner">
                <span class="video-logo">网易新闻</span>
                <span class="owl-icon">🦉</span>
                <span class="video-text">网易新闻资讯视频,记录这个时代的瞬间</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="right-column">
          <div class="featured-image">
            <div class="image-placeholder">
              <div class="image-content">
                <div class="people-avatars">
                  <div class="avatar"></div>
                  <div class="avatar"></div>
                  <div class="avatar"></div>
                </div>
              </div>
              <p class="image-caption">多国领导人乘高铁抵达北京</p>
            </div>
            <div class="carousel-indicators">
              <span class="indicator active"></span>
              <span class="indicator"></span>
              <span class="indicator"></span>
              <span class="indicator"></span>
            </div>
          </div>
          
          <div class="ad-content">
            <p>专业竞彩一触即发 ·让分享知识成为习惯</p>
            <p>会说话的人生能开挂·不止是看客</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.news-section {
  background: #fff;
  padding: 20px 0;
}

.news-layout {
  display: grid;
  grid-template-columns: 300px 1fr 280px;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.left-column,
.center-column,
.right-column {
  background: #fff;
}

/* 左侧样式 */
.attitude-section {
  margin-bottom: 30px;
}

.section-title {
  color: #d32f2f;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #d32f2f;
}

.subsection {
  margin-bottom: 20px;
}

.subsection-title {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.news-item {
  margin-bottom: 15px;
}

.news-title {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.news-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-points li {
  color: #666;
  font-size: 12px;
  margin-bottom: 5px;
  padding-left: 10px;
  position: relative;
}

.news-points li:before {
  content: "•";
  color: #d32f2f;
  position: absolute;
  left: 0;
}

.open-course {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 5px;
}

.course-content p {
  color: #666;
  font-size: 12px;
  margin: 5px 0;
}

.carousel-indicators {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

.indicator.active {
  background: #d32f2f;
}

/* 中间样式 */
.news-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.news-logo .logo-text {
  color: #d32f2f;
  font-size: 24px;
  font-weight: bold;
  margin-right: 30px;
}

.news-nav {
  display: flex;
  gap: 20px;
}

.news-nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  padding: 5px 0;
}

.news-nav a:hover,
.news-nav a.active {
  color: #d32f2f;
}

.main-news {
  background: #fff;
}

.featured-news {
  margin-bottom: 20px;
}

.main-headline {
  color: #333;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

.related-news {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.related-news .news-item h4 {
  color: #333;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  line-height: 1.4;
  cursor: pointer;
}

.related-news .news-item h4:hover {
  color: #d32f2f;
}

.news-video-banner {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
}

.video-banner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-logo {
  color: #d32f2f;
  font-weight: bold;
}

.owl-icon {
  font-size: 16px;
}

.video-text {
  color: #666;
  font-size: 12px;
}

/* 右侧样式 */
.featured-image {
  margin-bottom: 20px;
}

.image-placeholder {
  background: #f0f0f0;
  height: 200px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.image-content {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.people-avatars {
  display: flex;
  gap: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  background: #ddd;
  border-radius: 50%;
  border: 2px solid #fff;
}

.image-caption {
  color: #333;
  font-size: 14px;
  margin: 0;
  text-align: center;
}

.ad-content {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 5px;
}

.ad-content p {
  color: #666;
  font-size: 12px;
  margin: 5px 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .news-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .left-column,
  .right-column {
    order: 2;
  }
  
  .center-column {
    order: 1;
  }
}

@media (max-width: 768px) {
  .news-nav {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .news-logo .logo-text {
    margin-right: 15px;
  }
  
  .main-headline {
    font-size: 18px;
  }
}
</style>

